---
title: 这个网站是如何制作的
date: 2021-03-21
description: 这个网站的技术栈和制作过程
tags:
    - svelte
    - astro
    - 网站
---

# 介绍

这个网站是使用 [Astro](https://astro.build/) 构建的，它是一个现代的静态网站构建工具。在这篇文章中，我将解释我为什么选择 Astro 以及我是如何构建这个网站的。

# 为什么选择 Astro？

我选择 Astro 的主要原因是它的 "Partial Hydration" 特性。这意味着我可以有选择地对某些组件进行 hydration，而不是对整个页面进行 hydration。这使得网站加载速度更快，因为不需要加载不必要的 JavaScript。

# 技术栈

这个网站的技术栈相当简单：
- [Astro](https://astro.build/) 作为静态网站构建工具
- [Svelte](https://svelte.dev/) 用于交互式组件
- [TypeScript](https://www.typescriptlang.org/) 用于类型检查
- [MDX](https://mdxjs.com/) 用于博客文章
- [Sass](https://sass-lang.com/) 用于样式

# 设计过程

在设计这个网站时，我想要一个简约而现代的外观。我从 [Derek Kedziora](https://derekkedziora.com/) 的网站上获得了很多灵感。他的网站设计简洁，专注于内容。

# 开发过程

开发过程相当简单。我从 Astro 的默认模板开始，然后逐渐添加我需要的功能。我使用 Svelte 来构建交互式组件，如主题切换器和导航菜单。

# 部署

这个网站部署在 [Vercel](https://vercel.com/) 上。部署过程非常简单，只需连接 GitHub 仓库并配置一些环境变量即可。

# 结论

总的来说，使用 Astro 构建这个网站是一次愉快的经历。它让我能够快速构建一个快速、现代的网站，而无需处理复杂的构建配置。